﻿@using Ganss.XSS
@using HynuIOTA.Entity
@using HynuIOTA.Entity.ViewEntitys
@using HynuIOTA.Web.Areas.Blogs.Controllers

@{
    BlogArticle blog = ViewBag.blog;
    List<BlogLinkViewModel> recommendList = ViewBag.reCommend;
    ViewBag.Title = blog.Title;
    bool isLogin = ViewBag.isLogin;
    var sanitizer = new HtmlSanitizer();
}
@section scripts
{
<script>
        // 提交数据中
        function doBegin() {
            $.notifyBox.showNotifyInfo('正在提交数据....');
        }
        // 失败提示
        function doFail() {
            $.notifyBox.showNotifyErr('网络异常!');
        }
        // 处理数据提交后的返回值
        function doComplete(xhrObj) {
            $.processJsonMsgNotify(xhrObj.responseText, function() { loadComment(); });
        }

        // 设置是否可以评论
        function setComment() {
            if (@isLogin.ToString().ToLower() !== true) {
                $('#comment-textarea').attr('readonly', 'readonly').attr('placeholder', '  登录后才能留言');
                $('#validateCode').attr('readonly', 'readonly');
                $('#comment-submit').attr('readonly','readonly');
            } else {
                $('#comment-textarea').attr('placeholder', '  您的评论或留言（不小于15字）');
            }
        }

        // 验证表单
        function validateForm() {
            $('#comment-form').validate({
                rules: {
                    validateCode: {
                        required: true
                    },
                    Content: {
                        required: true,
                        minlength: 15
                    }
                },
                messages: {
                    validateCode: {
                        required: '验证码不能为空!'
                    },
                    Content: {
                        required: '评论内容不能为空!',
                        minlength: jQuery.format('评论内容少于{0}个字符!')
                    }
                },
                onfocusout: false,
                onkeyup: false,
                onclick: false,
                OnSubmit: true,
                errorPlacement: function(error, element) {
                    $.notifyBox.showNotifyErr(error.text());
                }
            });
        }

        function loadComment() {
            $.ajax({
                url: '@Url.Content("/Blogs/Blog/GetCommentList")',
                type: 'POST',
                data: { id: '@blog.Id' },
                error: function() {
                    $.notifyBox.showNotifyErr('网络错误!');
                },
                success: function(response) {
                    if (response.Statu !== 1) {
                        $.notifyBox.showNotifyErr(response.Msg);
                        return;
                    }
                    var comment = $('#comment_list');
                    comment.empty();
                    for (var i = 0; i < response.Data.length; i++) {
                        var item = response.Data[i];
                        var cli = $('<li class="comment-content"></li>');
                        comment.append(cli);
                        cli.append($('<span class="comment-f">#' + i + '</span>'));
                        cli.append($('<div class="comment-main"><p><a class="address" href="/Blogs/Blog/UBlogList/' +
                            item.UserId +
                            '" rel="nofollow" target="_blank">' +
                            item.UserName +
                            '</a><span class="time">(' +
                            item.ReplyTime +
                            ')</span><br>' +
                            item.Content +
                            '</p></div>'));
                    }
                }
            });
        }

        //当dom树初始化完成后
        $().ready(function() {
            setComment();
            loadComment();
            validateForm();
        });
</script>
}
<header class="article-header">
    <h1 class="article-title"><a href="@Url.RouteUrl("ShowArticle",new{Id = blog.Id})" title="@blog.Title">@blog.Title</a></h1>
    <div class="article-meta">
        <span class="item article-meta-time"><time class="time" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="发表时间：@blog.WriteTime"><i class="glyphicon glyphicon-time"></i> @blog.WriteTime</time></span>
        <span class="item article-meta-source" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="来源：@blog.User.UserName"><i class="glyphicon glyphicon-globe"></i><a href="@Url.Content("~/Blogs/Blog/UBlogList?id=")@blog.UserId"> @blog.User.UserName</a></span><span class="item article-meta-views" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="浏览量：@blog.VisitCount"><i class="glyphicon glyphicon-eye-open"></i> @blog.VisitCount</span><span class="item article-meta-comment" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="评论量"><i class="glyphicon glyphicon-comment"></i> @blog.CommentCount</span>
    </div>
</header>
<article style="color: #999;">
    <b>摘要：</b>@blog.Summary
</article>
<hr />
<article class="article-content">
    @Html.Raw(sanitizer.Sanitize(blog.Content))
</article>
<div class="article-tags">
    标签：
    @{
        foreach (var tag in blog.Tags)
        {
            @Html.ActionLink(tag.TagName, nameof(BlogController.TagBlogList), new { area = "Blogs", controller = "Blog" , id = tag.Id });
        }
    }
</div>
<div class="relates">
    <div class="title">
        <h3>相关推荐</h3>
    </div>
    <ul>
        @{
            foreach (var item in recommendList)
            {
                <li>
                    <a href="@Url.RouteUrl("ShowArticle",new{Id = blog.Id})">@item.Title</a>
                </li>
            }
        }
    </ul>
</div>
<div class="title" id="comment">
    <h3>评论</h3>
</div>
<div id="respond">
    @using (Ajax.BeginForm("AddComment", new { area = "Blogs", controller = "Blog" }, new AjaxOptions()
    {
        HttpMethod = "post",
        OnBegin = "doBegin",
        OnFailure = "doFail",
        OnComplete = "doComplete"
    }, new { id = "comment-form", name = "comment-form" }))
    {
        <div class="comment">
            <div class="comment-box">
                <div id="comment-error" class="alert color-warning" onclick="javascript: $('#comment-error').hide();" style="display: none"></div>
                <div id="comment-success" class="alert color-success" onclick="javascript: $('#comment-error').hide();" style="display: none"></div>
                <input type="text" name="BlogArticleId" value="@blog.Id" readonly="readonly" style="display: none" />
                <textarea placeholder="" name="Content" id="comment-textarea" cols="100%" rows="3" tabindex="3"></textarea>
                <div class="comment-ctrl">
                    <div style="float: left; margin: 5px">
                        <label>验证码:</label><input type="text" id="validateCode" name="validateCode" placeholder="（必填）" value="" style="width: 60px; margin-left: 10px; margin-right: 10px" /><img src="@Url.Content("~/ValidateCode.ashx")" alt="看不清，换一个？" onclick="this.src = this.src + '?'" style="margin-left: 10px; margin-right: 10px" />
                    </div>
                    <button type="submit" id="comment-submit" tabindex="4">评论</button>
                </div>
            </div>
        </div>
    }
</div>
<div id="postcomments">
    <ol id="comment_list" class="commentlist">
    </ol>
</div>